<script>
    import Header from '@/modules/Header.svelte';
    import Footer from '@/modules/Footer.svelte';
    import {onMount} from 'svelte';
    import {dom, nav} from '@/store';
    import {logger} from '@/utils/log'

    let pageRootDom;

    const setActiveIndex = (scrollSelf) => {
        const target = scrollSelf.trigger;
        const activeIndex = $nav.list.findIndex(nav => nav.id === `#${target.id}`);
        nav.set('activeIndex', activeIndex);
    }

    onMount(async () => {
        const [{gsap}, {ScrollTrigger}, {ScrollToPlugin}] = await Promise.all([
            import('gsap'),
            import('gsap/ScrollTrigger'),
            import('gsap/ScrollToPlugin')
        ]);
        gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
        const pageModuleDoms = Array.from(pageRootDom.querySelectorAll('section'));
        dom.set('rootDom', pageRootDom);

        pageModuleDoms.forEach(dom => {
            ScrollTrigger.create({
                scroller: pageRootDom,
                trigger: dom,
                start: "top 30%",
                end: "bottom 70%",
                onEnter: setActiveIndex,
                onEnterBack: setActiveIndex
            })
        })

        logger.sendLog({targetId: 'home-page-show', logType: 'elem_show'});
    });
</script>

<div bind:this={pageRootDom} id="page-root" class="page-root-wrapper">
    <Header></Header>
    <Footer></Footer>
</div>

<style lang="less">
    .page-root-wrapper {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
    }
</style>
